@import "./_variable";
//循环颜色
* {
  box-sizing: border-box;
  outline: none;
}

html {
  font-size: 13px;
}
body {
  margin: 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  line-height: 1.2em;
  background: #f1f1f1;
  -webkit-font-smoothing: antialiased;
}
* {
  padding: 0;
  margin: 0;
}
#app {
  height: 100vh;
  box-sizing: border-box;
}
a{
  text-decoration: none;
}
ul {
  list-style: none;
}
@each $colorKey,$color in $colors {
  .#{$colorKey}{
    color: $color;
  }
  .bg-#{$colorKey}{
    background: $color;
  }
}
//循环字体
@each $fontKey,$font in $font-sizes{
  .font-#{$fontKey}{
    font-size: $font * $font-base-size;
  }
}
@each $jcKey,$jc in $flex-jc{
  .jc-#{$jcKey}{
    justify-content: $jc;
  }
}
@each $aiKey,$ai in $flex-ai{
  .ai-#{$aiKey}{
    align-items: $ai;
  }
}
@each $typeKey,$type in $position-type{
  @each $diretionKey,$diretion in $position-diretion{
    //这里会获得 left   right   top     bottom
    @each $sizeKey,$size in $spacing-sizes{
      .#{$typeKey}#{$diretionKey}-#{$sizeKey}{
        #{$type}-#{$diretion}:$size * $spacing-base-size
      }
    }
  }
}
@each $typeKey,$type in $position-type{
  @each $sizeKey,$size in $spacing-sizes{
    .#{$typeKey}-#{$sizeKey}{
      #{$type}:$size * $spacing-base-size
    }
  }
}
////border
//@each $borderKey,$border in $border-position{
//
//}
